import React, { useState, useDeferredValue, useMemo } from 'react';
import List from './List';
const Father = () => {
    const [keyword, setKeyword] = useState('');
    const keyword1 = useDeferredValue(keyword);
    const NewList = useMemo(() => <List keyword={keyword}></List>, [keyword1])
    // keyword1 是  keyword副本, 当keyword 从'' => 1 时候,页面要渲染5000 个 1 ,等页面都页面
    // dom 更新完毕后, 才keyword1 从 ''=>1, 所以keyword1 更新延迟慢

    // 当keyword 的值改变的时候,list 重新渲染, 改变10, 重新渲染10次,
    // 当监听 keyword1的时候, 因为他渲染延迟, 所以监听到该keyword1 改变就慢,

    return (
        <div>
            <input type='text' value={keyword} onChange={(e) => setKeyword(e.target.value)} />
            {/* 渲染NewList组件 */}
            {NewList}
        </div>
    );
}

export default Father;
